<template>
	<view class="one-store">
		<view class="search_box" @click="isMask=false">
			<uni-easyinput class="search" type="text" placeholderStyle="font-size:28rpx;" @confirm="search()"
				:inputBorder="false" @clear="clear" prefixIcon="search" @input="search()" v-model="selectVo.keyword"
				placeholder="请输入商品分类"></uni-easyinput>
			<view class="search_btn" @click="search()">
				搜索
			</view>
		</view>
		<view class="scroll_content">
			<scroll-view class="scroll-view_list" :refresher-triggered="triggered" refresher-background="transparent"
				@refresherpulling="refresherpulling" refresher-enabled="true" scroll-y="true"
				@scrolltolower="scrolltolower" @refresherrefresh="onRefresh">
				<view v-if="tmpArr.length==0" class="void_goods">
					<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
					<view class="tip">该分类暂无保修政策</view>
				</view>
				<view class="order_list_box">
					<view class="order_list">
						<view class="order_list_item" @click="gologDetail(item)" v-for="(item,index) in tmpArr"
							:key="index">
							<view class="item_type"
								:class="{'item_type_active':item.id==is_active,'is_active_onclick':item.id==is_active&&is_active_onclick}">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import { onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiCode from '@/util/api/code.js'
	import _, { filter } from "lodash";
	const triggered = ref(false)

	// 搜索
	const selectVo = ref({
		dateType: 0,//	时间类型：1-本周，2-本月，3-本年，4-自定义时间区间,示例值(1)
		endTime: '',
		startTime: '',
		"keyword": "",
		"limit": 0,
		"page": 0,
		"status": 0//提现状态：1-待审核，2-付款中，3-完成，4-失败，5-驳回，查询全部则传空值
	})
	const isMask = ref(false)
// 该字段隐藏不显示
	const hiddenType = ref(['辅助物料', '办公用品', '劳保用品', '条码', '样品物料', '五金类', '塑胶类', '组件类', '包装印刷类', '泡沫类', '电器件', '橡胶类', '通用件类', '标准件类', '钢板类', '辅料类', '化工原料类', '宣传赠品类', '成品类', '物料类', '售后物料'])
	const goodsTypeList = ref({
		total: 0,
		rows: []
	})
	const clear = () => {
		selectVo.value.keyword = ''
		tmpArr.value = goodsTypeList.value.rows
	}
	const tmpArr = ref([])
	const search = _.debounce(async () => {
		selectVo.value.keyword = selectVo.value.keyword.trim()
		selectVo.value.page = 1
		if (selectVo.value.keyword) {

			tmpArr.value = goodsTypeList.value.rows.filter(o => o.childData.length > 0).filter(o => o.name.includes(selectVo.value.keyword))
		} else {
			tmpArr.value = goodsTypeList.value.rows
		}

	}, 100)
	// 获取列表
	const getGoodsTypesList = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		apiCode.getGoodsTypes().then(res => {
			uni.hideLoading()
			if (res.success) {
				goodsTypeList.value.rows = []
				res.data.rows.filter(o => {
					if (o.childData.length > 0) {
						o.childData.map(o => {
							if (!hiddenType.value.some(i => i == o.name)) {
								goodsTypeList.value.rows.push(o)
							}
						})
					}
				})
			}
			tmpArr.value = goodsTypeList.value.rows

		})
	}
	onLoad(async () => {
		getGoodsTypesList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	// 底部触发
	const scrolltolower = () => {
		if (goodsTypeList.value.rows.length < goodsTypeList.value.total) {
			selectVo.value.page += 1
			getGoodsTypesList()
		}
	}
	const onRefresh = async () => {
		selectVo.value.keyword = ''
		selectVo.value.page = 1
		await getGoodsTypesList()
		setTimeout(() => {
			triggered.value = false
		}, 800)
	}
	//
	const is_active = ref()
	const is_active_onclick = ref(false)
	const gologDetail = (item) => {
		is_active.value = item.id
		is_active_onclick.value = true
		uni.setStorageSync('IS_GOODS_TYPE_KEY', item)
		setTimeout(() => {
			is_active_onclick.value = false
			uni.navigateTo({
				url: '/pages_user/fee/fee?policy=1&queryType=1'
			})
		}, 300)
	}
</script>

<style lang="scss" scoped>
	.one-store {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		position: relative;

		.search_box {
			display: flex;
			align-items: center;
			// width: 100%;
			padding: 24rpx;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}

			.search_btn {
				font-size: 28rpx;
				font-weight: bold;
				color: #007cff;
				margin-left: 12rpx;
			}
		}

		.scroll_content {
			height: 100%;
			flex: 1;
			overflow: hidden;

			.scroll-view_list {

				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				height: 100%;
				box-sizing: border-box;

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 50vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}

				.order_list_box {
					padding-bottom: 200rpx;
				}

				.order_list {
					padding: 0 34rpx;
					box-sizing: border-box;
					background-color: #FFFFFF;

					display: flex;
					flex-direction: column;
					// gap: 24rpx;

					&_item {
						overflow: hidden;
						flex: 1;

						&~.order_list_item {
							border-top: 1px solid #eee;
						}

						.item_type {
							padding: 24rpx 12rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							font-size: 28rpx;

						}

						.item_type_active {

							color: #007cff;
						}

						.is_active_onclick {
							background-color: #e9edf5;
						}
					}

				}
			}
		}
	}
</style>